<template>
  <div class="follow-content-view">
    <div class="top-tip" v-if="this.contentData.length == 0">
      <div class="top-img">
        <img
          class="auto-img"
          src="@/assets/images/home/follow/Snipaste_2022-11-18_17-20-51.jpg"
        />
      </div>
      <div class="top-text-box">
        <div class="top-text-black">关注列表为空</div>
        <div class="top-text-lightblack">
          关注你感兴趣的人，她们发布的糗事会显示在这里
        </div>
      </div>
    </div>
    <div class="content-box" v-if="this.contentData.length > 0">
      <div
        class="content-list-wrap"
        v-for="(item, index) in contentData"
        :key="item.id"
      >
        <VideoCom
          :allContentData="allData"
          :scrollTop="scrollTop"
          :contentData="item"
          :isAutoplay="index == 0 ? true : item.isAutoplay"
          :loading="loading"
          :isFollow="item.isFollow"
          :isDislike="item.isDislike"
          :isLike="item.isLike"
          :index="index"
          @getVideoHeight="getVideoHeight($event)"
          @getFollowState="getFollowState(item)"
          @getLikeState="getLikeState(item)"
          @getDislikeState="getDislikeState(item)"
          @addShareCount="addShareCount(item)"
          @deleteData="deleteData(item)"
          @goTocomment="goTocomment(item)"
        />
      </div>
    </div>
    <div class="refresh-icon" @click="refresh"></div>
  </div>
</template>

<script>
import { getSearchContent } from "@/api/home";
import VideoCom from "@/components/HomeCom/VideoCom.vue";
export default {
  name: "FollowView",
  props: {
    scrollTop: {},
  },
  components: {
    VideoCom,
  },
  data() {
    return {
      //数据
      contentData: [],
      //总高度
      videoTotalHeight: 0,
      //加载状态
      loading: true,
      //刷新状态
      refreshState: false,
      //定时器延迟拿取数据
      timer: null,
      followedData: [],
    };
  },
  computed: {
    allData() {
      let res = this.contentData.filter((item) => {
        return item.format == "video";
      });
      return res;
    },
  },
  created() {
    //获取数据
  },
  activated() {
    this.followedData = JSON.parse(window.localStorage.getItem("followedData"));
    this.getHomeFollowContentData();
    this.timer = setTimeout(() => {
      this.getFollowedData();
      this.timer = null;
    }, 500);
  },
  watch: {
    //监听滚动自动播放
    scrollTop(newval, oldval) {
      let videoBottom = null;
      if (this.videoTotalHeight > newval) {
        videoBottom = this.videoTotalHeight - newval;
      }
      // console.log(newval);
      if (this.contentData.length > 0) {
        let autoplayIndex = Math.round(
          ((newval - 100 > 0 ? newval - 100 : 0) / this.videoTotalHeight) * 10
        );
        this.contentData.forEach((item, index) => {
          if (autoplayIndex == index) {
            item.isAutoplay = true;
          } else {
            item.isAutoplay = false;
          }
        });
      }
      if (
        (videoBottom > 0 && videoBottom < 500 && newval > oldval) ||
        videoBottom == null
      ) {
        if (this.loading) {
          this.loading = false;
          this.getHomeFollowContentData(1);
        } else if (!this.loading && newval >= this.videoTotalHeight) {
          this.$toast({
            message: "没有更多了哦~",
            position: "bottom",
          });
        }
      }
      // console.log(this.contentData);
    },
    // //滚到距离顶部一段距离后加载新数据
    loading(newval) {
      if (newval == false) {
        this.videoTotalHeight = 0;
      }
    },
    // "contentData.length"() {
    //   this.timer = setTimeout(() => {
    //     this.getFollowedData();
    //     this.timer = null;
    //   }, 100);
    // },
  },
  methods: {
    //获取数据
    getHomeFollowContentData() {
      getSearchContent({ axios: this.$axios }).then(({ data }) => {
        data.forEach((item) => {
          item["isAutoplay"] = false;
          item["isFollow"] = false;
          item["isLike"] = false;
          item["isDislike"] = false;
        });
        this.contentData=data;
      });
    },
    //获取所有内容的高度
    getVideoHeight(val) {
      this.videoTotalHeight += val;
    },
    //关注
    getFollowState(item) {
      // item.isFollow = !item.isFollow;
      // let followedData = JSON.parse(
      //   window.localStorage.getItem("followedData")
      // );
      // let idArr = [];
      // followedData.forEach((item) => {
      //   idArr.push(item.id);
      // });
      // if (item.isFollow && idArr.indexOf(item.user.id) == -1) {
      //   followedData.push(item.user);
      //   window.localStorage.setItem(
      //     "followedData",
      //     JSON.stringify(followedData)
      //   );
      // } else {
      //   // console.log(followedData.indexOf(item.user));
      //   followedData.forEach((item2, index) => {
      //     if (item2.id == item.user.id) {
      //       followedData.splice(index, 1);
      //       window.localStorage.setItem(
      //         "followedData",
      //         JSON.stringify(followedData)
      //       );
      //     }
      //   });
      // }

      this.$dialog
        .confirm({
          title: "确定要取消关注吗?",
        })
        .then(() => {
          // on confirm
          let res = this.contentData.filter((item2) => {
            return item2.user.id != item.user.id;
          });
          this.contentData = res;
          window.localStorage.setItem(
            "followedData",
            JSON.stringify(this.contentData)
          );
        })
        .catch(() => {
          // on cancel
        });
    },
    //点赞
    getLikeState(item) {
      item.isLike = !item.isLike;
      if (item.isLike) {
        item.isDislike = false;
        item.votes.up++;
      } else {
        item.votes.up--;
      }
    },
    //踩
    getDislikeState(item) {
      item.isDislike = !item.isDislike;
      if (item.isDislike && item.isLike) {
        item.isLike = false;
        item.votes.up--;
      }
    },
    //分享
    addShareCount(item) {
      item.share_count++;
    },
    //刷新内容
    refresh() {
      if (this.refreshState == false) {
        this.refreshState = true;
        // getHomeFollowContent({ axios: this.$axios }).then(
        //   ({ data }) => {
        //     data.items.forEach((item) => {
        //       item["isAutoplay"] = false;
        //       item["isFollow"] = false;
        //       item["isLike"] = false;
        //       item["isDislike"] = false;
        //     });
        //     this.contentData.unshift(...data.items);
        //     // console.log(this.contentData);
        //   }
        // );
      } else {
        this.$toast({
          message: "没有更多啦~",
          position: "top",
        });
      }
    },
    //删除
    deleteData(item) {
      this.$dialog
        .confirm({
          title: "确定要删除吗?",
        })
        .then(() => {
          // on confirm
          this.contentData.forEach((item2, index) => {
            if (item2 == item) {
              this.contentData.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取已关注
    getFollowedData() {
      let followedDataId = [];
      this.followedData.forEach((item) => {
        followedDataId.push(item.id);
      });
      if (this.followedData) {
        let res = this.contentData.filter((item) => {
          return followedDataId.indexOf(item.user.id) != -1;
        });
        this.contentData = res;
      }
      this.contentData.forEach((item) => {
        if (followedDataId.indexOf(item.user.id) != -1) {
          item.isFollow = true;
        } else {
          item.isFollow = false;
        }
      });
    },
    //跳转评论详情页
    goTocomment(item) {
      window.localStorage.setItem("commentContentData", JSON.stringify(item));
      let dataId = item.id;
      if (dataId != 125654473 && dataId != 125657703) {
        dataId = 125654473;
      }
      this.$router.push(`/comment?id=${dataId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-content-view {
  width: 100%;
  .top-tip {
    width: 100%;
    text-align: center;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    .top-img {
      width: 100px;
      height: 100px;
      margin: 20px auto 0;
      transform: scale(1.5);
      position: relative;
      left: 25px;
    }
    .top-text-box {
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      margin: 0 auto;
      .top-text-black {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .top-text-lightblack {
        color: #aaa;
      }
    }
  }
  .content-box {
    width: 100%;
    padding-bottom: 20px;
  }
  .refresh-icon {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    position: absolute;
    bottom: 65px;
    right: 10px;
    background-image: url(../../assets/images/home/bYu.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 99;
  }
}
</style>